<template>
  <div class="home app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="咨询"></header-nav>
    </div>
    <div class="chat">
      <div v-for="chat in chats">
        <div v-if="chat.from == info.curUser.id" class="me">
          <div class="content">{{chat.content}}</div>
          <div class="circle">我</div>
        </div>
        <div v-if="chat.from !== info.curUser.id" class="bot">
          <div class="circle">{{info.teacher.name}}</div>
          <div class="content">{{chat.content}}</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-field
      style="width: 90%;"
          v-model="info.content"
        />
      <div class="fasong" @click="send">发送</div>
    </div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Video">
import { showDialog } from 'vant';
import { reactive, ref } from "vue";
import { getChat, getUserById, addChat, updateChat } from "@/api/http.js";
const router = useRouter();
const { useHome } = $globalStore;
const route = useRoute();

let info = reactive({
    plans: [],
    title: '',
    show: false,
    cur: {},
    teacher: {},
    content: '',
    curUser: {},
    curChat: {}
})
let chats = ref([])

const send = () => {
  if (!info.content) {
    showDialog({
      title: '提醒',
      message: '请输入内容',
    }).then(() => {
      // on close
      console.log(111)
    });
    return
  }
  console.log(info.content)
  if (!info.curChat.id) {
    addChat({
      userid: info.curUser.id,
      teacherid: info.teacher.id,
      content: JSON.stringify([
        {
          content: info.content,
          from: info.curUser.id,
        }
      ])
    }).then(res => {
      chats.value.push({
        content: info.content,
        from: info.curUser.id,
      })
      info.content = ''
      console.log(res)
      info.curChat = {
        ...info.curChat,
      }
    })
  } else {
    chats.value.push({
      content: info.content,
      from: info.curUser.id,
    })
    updateChat({
      ...info.curChat,
      content: JSON.stringify(chats.value)
    }).then(res => {
      info.content = ''
      console.log(res)
      info.curChat = {
        ...info.curChat,
      }
    })
  }
}


onMounted(() => {
  let userId = Number(route.params.id)
  if (localStorage.getItem('appUserInfo')) {
    info.curUser = JSON.parse(localStorage.getItem('appUserInfo'))
  }
  getUserById(userId).then(res => {
    info.teacher = res.data;
    // 查询我跟这个人的聊天记录，如果没有则新增
    getChat(info.curUser.id, info.teacher.id).then(chat => {
      console.log(chat)
      if (chat.data.length) {
        info.curChat = chat.data[0];
        if (info.curChat.content) {
          chats.value = JSON.parse(info.curChat.content)
          console.log(chats.value)
        }
        
      }
    })
  })

});
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

}

.chat{
  font-size: 12px;
  width: 90%;
  height: 80vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 15px;
}
.bottom {
  position: fixed;
  bottom: 50px;
  width: 100%;
  height: 40px;
  text-align: center;
  background: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.fasong {
  color: blueviolet;
}
.me {
  padding-left: 40%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: flex-end;
}
.bot {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.circle {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid lightcoral;
}

.content {
  background: lightpink;
  padding: 8px;
  border-radius: 10px;
  margin: 0 10px;
}
</style>
